<template>
    <Row class="layout-content-body">
        <dtable
                :columns="columns"
                :data-all="dataAll"
                :data-show="dataShow"
                :loading="loading"
                add
                op
                @refresh="getall()"
                @add="add"
                @del="del"
                @edit="edit"
        />
        <Modal
                v-model="editData"
                title="资源信息"
                :loading="loading"
                :mask-closable="false"
                class="editm"
                @on-ok="asyncOK"
                @on-cancel="asyncCancel"
        >
            <Form
                    ref="editForm"
                    :model="formItem"
                    :label-width="80"
                    :rules="ruleValidate"
            >
                <Form-item
                        label="名称"
                        prop="Name"
                >
                    <Input
                            v-model="formItem.Name"
                            placeholder="请输入"
                    ></Input>
                </Form-item>
                <Form-item
                        label="简称"
                        prop="Abbr"
                >
                    <Input
                            v-model="formItem.Abbr"
                            placeholder="请输入"
                    ></Input>
                </Form-item>
                <Form-item
                        label="系统标题"
                        prop="Title"
                >
                    <Input
                            v-model="formItem.Title"
                            placeholder="请输入"
                    ></Input>
                </Form-item>
                <Form-item
                        label="系统图标"
                        prop="Logo"
                >
                    <Input
                            v-model="formItem.Logo"
                            placeholder="请输入"
                            :icon="formItem.Logo"
                    ></Input>
                </Form-item>
                <Form-item
                        label="存储限制（MB）"
                        prop="Userlimit"
                >
                    <Input
                            v-model.number="formItem.Userlimit"
                            placeholder="请输入"
                    ></Input>
                </Form-item>
                <Form-item
                        label="联系人"
                        prop="Contact"
                >
                    <Input
                            v-model="formItem.Contact"
                            placeholder="请输入"
                    ></Input>
                </Form-item>
                <Form-item
                        label="电话"
                        prop="Phone"
                >
                    <Input
                            v-model="formItem.Phone"
                            placeholder="请输入"
                    ></Input>
                </Form-item>
                <FormItem
                        label="Context"
                        prop="Context">
                    <Input v-model="formItem.Context"/>
                </FormItem>
                <Form-item
                        label="状态"
                        prop="Status"
                >
                    <Radio-group v-model.number="formItem.Status">
                        <Radio :label="1">启用</Radio>
                        <Radio :label="0">停用</Radio>
                    </Radio-group>
                </Form-item>
                <Form-item
                        label="说明"
                        prop="Remark"
                >
                    <Input
                            v-model="formItem.Remark"
                            type="textarea"
                            :autosize="{minRows: 2,maxRows: 5}"
                            placeholder="请输入..."
                    >
                    </Input>
                </Form-item>
            </Form>
        </Modal>
    </Row>
</template>

<script>
    import dtable from '@/components/table/dtable.vue';

    export default {
        components: {
            dtable
        },
        data() {
            return {
                loading: false, // 数据刷新遮罩层
                columns: [
                    {
                        title: '名称',
                        key: 'Name',
                        width: 280
                    },
                    {
                        title: '系统标题',
                        key: 'Title'
                    },
                    {
                        title: '存储限制（MB）',
                        key: 'Userlimit'
                    },
                    {
                        title: '联系人',
                        key: 'Contact'
                    },
                    {
                        title: '联系电话',
                        key: 'Phone'
                    },
                    {
                        title: '状态',
                        key: 'Sname',
                        sortable: true
                    }
                ], // 表格样式
                dataAll: [], // 表格数据来源
                dataShow: true, // 是否显示表格数据查看表单
                editData: false, // 显示编辑表单
                formItem: {
                    Name: '',
                    Abbr: '',
                    Logo: '',
                    Pid: '',
                    Title: '',
                    Userlimit: 99999,
                    Status: 1,
                    Contact: '',
                    Phone: '139',
                    Remark: ''
                }, // 数据编辑表单
                ruleValidate: {
                    Name: [
                        {
                            required: true,
                            message: '名称不能为空',
                            trigger: 'blur'
                        }
                    ],
                    Title: [
                        {
                            required: true,
                            message: '系统标题不能为空',
                            trigger: 'blur'
                        }
                    ],
                    Contact: [
                        {
                            required: true,
                            message: '联系人不能为空',
                            trigger: 'change'
                        }
                    ],
                    //          Pid: [
                    //            {type: 'number',required: true, message: '联系电话不能为空', trigger: 'change'}
                    //          ],
                    Phone: [
                        {
                            required: true,
                            message: '联系电话不能为空',
                            trigger: 'change'
                        }
                    ]
                }, // 数据编辑表单验证规则
                addid: 0 // 0为修改模式，1为添加模式
            };
        },
        computed: {
            //      过滤数据
            filiterTableDate() {
                let e = this.dataAll.slice();
                let keys = this.searchKey;
                let filterData = function (element) {
                    if (keys === '') {
                        return true;
                    }
                    for (let o in element) {
                        if (String(element[o]).indexOf(keys) >= 0) {
                            return true;
                        }
                    }
                    return false;
                };
                let fdata = e.filter(filterData);
                this.total = fdata.length;
                return fdata;
            },
            //      当前显示数据
            curTableData() {
                let from = this.pageSize * (this.current - 1);
                let to = from + this.pageSize;
                return this.filiterTableDate.slice(from, to);
            },
            //      父组织名称
            parentRes() {
                let pr = [
                    {
                        Id: 0,
                        Name: '顶级组织'
                    }
                ];
                for (let e in this.dataAll) {
                    pr.push({
                        Name: this.dataAll[e].Name,
                        Id: this.dataAll[e].Id
                    });
                }
                return pr;
            },
            // 状态数据转换
            fStauts() {
                if (this.formItem.Status === 1) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        mounted() {
            let self = this;
            self.getall();
        },
        methods: {
            //     获取资源名称
            getNameById(value) {
                let rname = '';
                if (value || '') {
                    let rv = this.dataAll.filter((col, index) => col.Id === value);
                    rname = rv[0].Name;
                }
                return rname;
            },
            getall() {
                this.loading = true;
                this.$api.getOrganization().then(res => {
                    if (!res.error) {
                        this.dataAll = res.Data;
                        console.log(this.dataAll);
                        this.total = res.Data.length;
                    } else {
                        this.$Message.error(res.message);
                    }
                });
                this.loading = false;
                // setTimeout(() => {
                //     this.loading = false;
                // }, 1000);
            },
            edit(index) {
                this.addid = 0;
                this.formItem = index;
                this.editData = true;
            },
            add() {
                this.addid = 1;
                this.$refs['editForm'].resetFields();
                this.editData = true;
            },
            asyncOK() {
                this.$refs['editForm'].validate(valid => {
                    if (valid) {
                        if (this.addid === 0) {
                            this.$api.updateOrganization(this.formItem).then(
                                res => {
                                    if (!res.error) {
                                        this.getall();
                                        this.$Message.success(res.message);
                                    } else {
                                        this.$Message.error(res.message, 4);
                                    }
                                },
                                err => {
                                    this.$Message.error(err, 4);
                                }
                            );
                        } else if (this.addid === 1) {
                            this.$api.addOrganization(this.formItem).then(
                                res => {
                                    if (!res.error) {
                                        this.getall();
                                        console.log(res.data);
                                        this.$Message.success(res.message);
                                    } else {
                                        this.$Message.error(res.message, 4);
                                    }
                                },
                                err => {
                                    this.$Message.error(err, 4);
                                }
                            );
                        }
                        setTimeout(() => {
                            this.editData = false;
                        }, 1000);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });
                this.$refs['editForm'].resetFields();
            },
            asyncCancel() {
                this.$refs['editForm'].resetFields();
                this.getall();
            },
            del(row) {
                this.$api.deleteOrganization(row).then(
                    res => {
                        if (!res.error) {
                            this.getall();
                            this.$Message.success(res.message);
                        } else {
                            this.$Message.error(res.message, 4);
                        }
                    },
                    err => {
                        this.$Message.error(err, 4);
                    }
                );
            }
        }
    };
</script>
